import { defineComponent, ref } from 'vue'
import type ItemNode from '../ItemNode/ItemNode'

export default defineComponent((props, { expose }) => {
  const borderRef = ref()
  const tragetNode = ref<ItemNode>()

  const style = ref({
    pointerEvents: 'none',
    position: 'absolute',
    zIndex: '100',
    inset: '0',
    boxSizing: 'border-box',
    border: '2px dashed var(--color-8)' // outline会被父元素的overflow: auto裁剪
  })

  const clearHover = () => {
    tragetNode.value = null
    borderRef.value.remove()
  }

  const fit = (el: HTMLElement) => {
    if (!el) return

    el.append(borderRef.value)
  }

  const hover = (node) => {
    clearHover()

    tragetNode.value = node

    fit(node.elRef.value)
  }

  expose({
    hover,
    clearHover
  })

  return () => <div ref={borderRef} style={style.value as any}></div>
})
